<template>
    <div class="seat" :class="{isClick:seatInfo.isChoose,isNod:seatState===2||seatType==='L'||seatType==='R',isL:seatType==='L',isR:seatType==='R'}" @click="_clickSeat">
      <span class="icon"></span>
      <div class="line"></div>
    </div>
</template>

<script>
    export default {
        props:{
          seatInfo:{
            type:Object
          },
          chooseSeatList:{
            type:Array,
            default(){
              return []
            }
          }
        },
        data(){
          return{
            seatState:'',
            isClick:false,
            seatType:''
          }
        },
        name: "seat",
        methods:{
          _clickSeat(){
            if(this.seatState===2||this.seatType==='L'||this.seatType==='R'){
              //若当前座位为已选中状态则不可点击
              return
            }
            if(this.seatInfo.isChoose){
              //若选中座位为四个时并且自身是未选中状态则不可点击
              this.seatInfo.isChoose = false
              this.$emit('delChooseSeat',this.seatInfo)
            }else if(this.chooseSeatList.length<4&&!this.seatInfo.isChoose){
              this.seatInfo.isChoose = true
              this.$emit('addChooseSeat',this.seatInfo)
            }
          }
        },
        watch:{
          'chooseSeatList'(){
          }
        },
        mounted() {
          this.seatState = this.seatInfo.seatState
          this.seatType = this.seatInfo.seatType
          console.log(this.seatType)
        }
    }
</script>

<style scoped lang="stylus">
  .seat
    position relative
    height 100%
    width 100%
    background #3E4147
    border-radius 50%
    /*overflow hidden*/
    /*transition background 0.2s*/
    &.isL
      .line
        position absolute
        top calc(50% - 1px)
        height 2px
        width 100%
        left 50%
        background #EEAC21
    &.isR
      .line
        position absolute
        top calc(50% - 1px)
        height 2px
        width 100%
        left -50%
        background #EEAC21
    &.isClick
      background linear-gradient(to right top, #F35F46 , #F8366E)
      transition background 0.2s
      .icon
        display inline-block
        height 100%
        width 100%
        background url("icon_checked.svg")no-repeat center/70% 30%
    &.isNod
      background #EEAC21
</style>
